<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="全部" name="order-all"
        ><section class="checkout-page user-center-order">
          <div class="row">
            <div class="col-md-12">
              <div class="order-details">
                <div class="order-details__top order-details-header">
                  <p>订单编号</p>
                  <p>订单总金额</p>
                  <p>创建时间</p>
                  <p>状态</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="order-details order-container">
                <p :key="order.id" v-for="order in ruleForm.orders">
                  <span>{{ order.orderId }}</span>
                  <span>￥{{ order.totalAmount }}元</span>
                  <span>{{ order.createTime }}</span>
                  <span v-if="order.status === 0">待支付</span>
                  <span v-else-if="order.status === 1">已取消</span>
                  <span v-else-if="order.status === 2">待发货</span>
                  <span v-else-if="order.status === 3">待收货</span>
                  <span v-else-if="order.status === 4">已完成</span>
                </p>
              </div>
            </div>
          </div>
        </section></el-tab-pane
      >
      <el-tab-pane label="待支付" name="order-0">
        <oreder-list :ruleForm="ruleForm" :status="0"
      /></el-tab-pane>
      <el-tab-pane label="已取消" name="order-1"
        ><oreder-list :ruleForm="ruleForm" :status="1"
      /></el-tab-pane>
      <el-tab-pane label="待发货" name="order-2"
        ><oreder-list :ruleForm="ruleForm" :status="2"
      /></el-tab-pane>
      <el-tab-pane label="待收货" name="order-3"
        ><oreder-list :ruleForm="ruleForm" :status="3"
      /></el-tab-pane>
      <el-tab-pane label="已完成" name="order-4"
        ><oreder-list :ruleForm="ruleForm" :status="4"
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.user-center-order {
  padding-top: 0;
}
.user-center-order li[role="presentation"] {
  width: 100px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
}
.user-center-order li[role="presentation"] a {
  color: #000;
}
.user-center-order li[role="presentation"] a.active {
  color: #60be74;
  font-weight: 800;
}
.user-center-order .order-details-header {
  display: flex;
}
.user-center-order .order-details-header > p {
  display: block;
  justify-content: center;
  text-align: left;
  width: 25%;
}
.user-center-order .order-container {
  display: block;
}
.user-center-order .order-container > p {
  display: flex;
  justify-content: space-between;
}
.user-center-order .order-container > p > span {
  text-align: left;
  width: 25%;
}
.user-center-order .order-container small {
  font-size: 14px;
  display: inline-block;
  width: 3.5em;
  text-align: center;
}
.user-center-order .order-container > p > span:nth-child(1),
.user-center-order .order-details-header > p:nth-child(1) {
  width: 30%;
}
.user-center-order .order-container > p > span:nth-child(2),
.user-center-order .order-details-header > p:nth-child(2) {
  width: 20%;
}
</style>

<script>
/* eslint-disable */
import { editUser } from "@/api/user";
import OrederList from "./components/OrederList.vue";
export default {
  components: { OrederList },
  data() {
    return {
      loading: true,
      activeName: "order-all",
      ruleForm: {
        id: localStorage.getItem("UID"),
        email: localStorage.getItem("NAME"),
        avatar: null,
        orders: [],
      },
      rules: {},
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.ruleForm = this.$store.getters.GetUserInfo;
      console.log(this.ruleForm);
    },
    handleEdit() {
      editUser(this.ruleForm).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
